<template>

	<view class="share-wrapper">
		<view class="share-pop">
			<view class="share-item" v-for="(item, index) in providerList" :key="index" @click="clickHandler(item)">
				<image :src="item.img" mode=""></image>
				<view class="">{{ item.name }}</view>
			</view>
		</view>
		<view class="button-base" @click="close()">
			关闭
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 商品id
			goodsId: {
				type: String,
				default: ''
			},
			// 分享的图片
			shareImg: {
				type: String,
				default: ''
			},
			// 分享标题
			shareTitle: {
				type: String,
				default: ''
			},
			// 分享内容
			shareContent: {
				type: String,
				default: ''
			},
			// 分享链接
			shareHref: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				shareType: 0,
				providerList: [] // 分享通道 包含生成海报
			}
		},
		mounted() {
			/**
			 * 
			 *  H5+ 获取分享通道
			 * 
			 */
			uni.getProvider({
				service: 'share',
				success: (e) => {
					let data = []
					for (let i = 0; i < e.provider.length; i++) {
						switch (e.provider[i]) {
							case 'weixin':
								data.push({
									name: '微信好友',
									cate: 'share',
									id: 'weixin',
									img: '../../static/image/ic-wechat.png',
									sort: 0
								})
								data.push({
									name: '微信朋友圈',
									cate: 'share',
									id: 'weixin',
									type: 'WXSenceTimeline',
									img: '../../static/image/circle-of-friends.png',
									sort: 1
								})
								break;
							default:
								break;
						}
					}

					data.push({
						name: '生成二维码',
						cate: 'poster',
						id: 'poster',
						img: '../../static/image/poster.png',
						sort: 5
					})
					this.providerList = data.sort((x, y) => {
						return x.sort - y.sort
					});
				},
				fail: (e) => {
					// console.log('获取分享通道失败', e)
				}
			});
		},
		methods: {
			// 关闭弹出层
			close() {
				this.$emit('close')
			},
			// 点击操作
			clickHandler(e) {
				if (e.cate === 'poster') {
					this.createPoster()
				} else {
					// 去分享
					this.share(e)
				}
			},
			// 生成二维码
			createPoster() {
				let data = {
					shareType: this.shareType,
					resourceUuid: this.goodsId,
					userUuid: this.userId,
					shareHref: this.shareHref,
					hrefType: 1
				}
				this.$api.request.goodsPoster(data, res => {
					if (res.body.status.statusCode === '0') {
						this.close();
						uni.navigateTo({
							url: '/pages/resource/poster?poster=' + escape(res.body.data.posterUrl)
						})
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				});
			},
			// 分享操作
			async share(e) {
				// console.log('分享通道:'+ e.id +'； 分享类型:' + this.shareType);
				// 			if(!this.shareContent){
				// 				uni.showModal({
				// 					content:'分享内容不能为空',
				// 					showCancel:false
				// 				})
				// 				return;
				// 			}
				// 			
				// 			if(!this.shareImg){
				// 				uni.showModal({
				// 					content:'分享图片不能为空',
				// 					showCancel:false
				// 				})
				// 				return;
				// 			}

				let shareOPtions = {
					provider: e.id,
					scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' :
					'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
					type: this.shareType,
					success: (e) => {
						uni.showModal({
							content: '分享成功',
							showCancel: false
						})
					},
					fail: (e) => {
						uni.showModal({
							content: e.errMsg,
							showCancel: false
						})
					},
					complete: function() {
						// console.log('分享操作结束!')
					}
				}

				shareOPtions.summary = this.shareContent ? this.shareContent : ''
				shareOPtions.imageUrl = this.shareImg ? this.shareImg : ''
				shareOPtions.title = this.shareTitle ? this.shareTitle : ''
				shareOPtions.href = this.shareHref ? this.shareHref : ''
				if (shareOPtions.type === 0 && plus.os.name === 'iOS') { //如果是图文分享，且是ios平台，则压缩图片 
					// shareOPtions.imageUrl = await this.compress()
				}
				if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
					shareOPtions.href = this.shareHref
					shareOPtions.title = this.shareTitle
				}
				uni.share(shareOPtions);
			},
			// 压缩图片 图文分享要求分享图片大小不能超过20Kb
			compress() {
				// console.log('开始压缩');
				let img = this.shareImg;
				return new Promise((res) => {
					var localPath = plus.io.convertAbsoluteFileSystem(img.replace('file://', ''));
					// console.log('after' + localPath);
					// 压缩size
					plus.io.resolveLocalFileSystemURL(localPath, (entry) => {
						entry.file((file) => { // 可通过entry对象操作图片 
							// console.log('getFile:' + JSON.stringify(file));
							if (file.size > 20480) { // 压缩后size 大于20Kb
								plus.zip.compressImage({
									src: img,
									dst: img.replace('.jpg', '2222.jpg').replace('.JPG',
										'2222.JPG'),
									width: '10%',
									height: '10%',
									quality: 1,
									overwrite: true
								}, (event) => {
									// console.log('success zip****' + event.size);
									let newImg = img.replace('.jpg', '2222.jpg').replace(
										'.JPG', '2222.JPG');
									res(newImg);
								}, function(error) {
									uni.showModal({
										content: JSON.stringify(error),
										showCancel: false
									})
									// uni.showModal({
									// 	content:'分享图片太大,需要请重新选择图片!',
									// 	showCancel:false
									// })
								});
							}
						});
					}, (e) => {
						// console.log('Resolve file URL failed: ' + e.message);
						uni.showModal({
							content: JSON.stringify(e),
							showCancel: false
						})
						// uni.showModal({
						// 	content:'分享图片太大,需要请重新选择图片!',
						// 	showCancel:false
						// })
					});
				})
			}
		}
	}
</script>

<style>
	.share-wrapper {
		width: 100%;
		height: 400upx;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		bottom: var(--window-bottom);
	}

	.share-pop {
		/* height: 300upx; */
		width: 100%;
		display: flex;
	}

	.share-item {
		flex: 1;
		text-align: center;
		font-size: 26upx;
		color: #333;
		padding: 20upx 0;
	}

	.share-item image {
		width: 80upx;
		height: 80upx;
		margin: 20upx;
	}

	.share-item .btn {
		line-height: 1;
		display: block;
		font-size: 26upx;
		background-color: #fff;
	}
	
	.button-base{
		margin: 40upx 0;
	}
</style>